<style>
.CodeMirror {
    border: 1px solid #ddd;
    height: auto;
}
.CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}
</style>
<template>
    <Row>
        <Row :gutter="3">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <Icon type="ios-film-outline"></Icon>
                        经验库
                    </p>
                    <br>
                    <Row :gutter="3">
                        <Col span="8">&nbsp;</Col>
                        <Col span="8">
                            <Input v-model="keywords" @keyup.enter.native="handleSearch(1)" placeholder="请输入关键字">
                                <Icon type="ios-search-strong" slot="prepend" style="padding:0px 10px;"></Icon>
                            </Input>
                        </Col>
                        <Col span="8">&nbsp;</Col>
                    </Row>
                    <br>
                    <br>
                    <Row :gutter="3">
                        <Col span="1">&nbsp;</Col>
                        <Col span="16">
                            <Page @on-change="changePage" :current="page.current" :total="page.total" :page-size="page.pagesize" show-total show-elevator></Page>
                        </Col>
                        <Col span="6">
                            <RadioGroup v-model="searchtype" @on-change="changeSearchtype" style="line-height:30px;">
                                <Radio label="my">我的</Radio>
                                <Radio label="all">全部</Radio>
                            </RadioGroup>
                        </Col>
                        <Col span="1">&nbsp;</Col>
                    </Row>
                    <br>
                    <Row :gutter="5">
                        <Col span="1">&nbsp;</Col>
                        <Col span="22">
                            <Table stripe border highlight-row :columns="columns" :data="data" :loading="table.loading" @on-current-change="handleFormdata" @on-sort-change="changeSort"></Table>
                        </Col>
                        <Col span="1">&nbsp;</Col>
                    </Row>
                </Card>
            </Col>
        </Row>
        <br>
        <Row :gutter="3">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <Icon type="ios-film-outline"></Icon>
                        编辑
                    </p>
                    <br>
                    <Row :gutter="3">
                        <Col span="24">
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                                <FormItem label="ID" prop="id">
                                    <Input v-model="formValidate.id" placeholder="ID不可编辑" disabled></Input>
                                </FormItem>
                                <FormItem label="标题" prop="titlename">
                                    <Input v-model="formValidate.titlename" placeholder="请输入标题"></Input>
                                </FormItem>
                                <FormItem label="类型" prop="codeType">
                                    <Input v-model="formValidate.codeType" placeholder="请输入类型"></Input>
                                </FormItem>
                                <FormItem label="内容" prop="codeContent">
                                    <codemirror v-model="formValidate.codeContent" :options="cmOptions" style="line-height:19px;"></codemirror>
                                    <!-- <Input v-model="formValidate.codeContent" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入代码"></Input> -->
                                </FormItem>
                                <FormItem label="序号" prop="sn">
                                    <Input type="number" v-model="formValidate.orderNum" placeholder="请输入序号"></Input>
                                </FormItem>
                                <FormItem label="创建人" prop="creator">
                                    <Input v-model="formValidate.creator" placeholder="请输入创建人" disabled></Input>
                                </FormItem>
                                <FormItem label="阅读次数" prop="readNums">
                                    <Input v-model="formValidate.readNums" placeholder="" disabled></Input>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" @click="handleSubmit('formValidate')" :loading="save_loading">保存</Button>
                                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                                </FormItem>
                            </Form>
                        </Col>
                    </Row>
                </Card>
            </Col>
        </Row>
    </Row>
</template>

<script>
import { codemirror } from 'vue-codemirror'
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
require('codemirror/mode/javascript/javascript.js')
import 'codemirror/theme/idea.css'
export default {
    name: 'webpage',
    components:{
        codemirror
    },
    data () {
        return {
            serverpath:'',
            searchtype:'my',
            key:'codeContent',
            keywords:'',
            page: {
                total: 0,
                current: 1,
                pagesize: 5,
                //原代码为  key: 'username', 但不符合通用规则,修改成id为key,如有需要可以改正
                key: 'orderNum',
                order: 'asc',
                pagesizeopts: [5, 10, 20, 30, 40, 100]
            },
            table: {
                loading:true,
                selection:[],
                keywords: ''
            },
            columns: [
                {
                    key: 'orderNum',
                    title: 'sn',
                    width: 80,
                    sortable: 'custom'
			          },
                {
                    key: 'codeType',
                    title: '类型',
                    width: 100,
                    sortable: 'custom'
                },
                {
                    key: 'titlename',
                    title: '标题 (点击下面的行，查看和修改详情)',
                    sortable: 'custom'
                },
                {
                    key: 'creator',
                    title: '作者',
                    width: 110,
                    sortable: 'custom'
                },
                {
                    key: 'readNums',
                    title: '阅读',
                    width: 80,
                    sortable: 'custom'
                }
			      ],
            data: [],
            save_loading:false,
            formValidate: {
                id:''
                ,titlename: ''
                ,codeType: ''
                ,codeContent: ''
                ,creator: ''
                ,orderNum: 1
                ,readNums: '0'
            },
            ruleValidate: {
                titlename: [
                    { required: true, message: '标题不能为空', trigger: 'blur'  }
                ]
                ,
                codeType: [
                    { required: true, message: '类型不能为空', trigger: 'blur'  }
                ]
            },
            cmOptions: {
                height: "100%",
                tabSize: 2,
                lineNumbers: true
            }
        };
    },
    methods: {
        handleSubmit (name) {
            this.save_loading = true;
            let self = this;
            let myname = localStorage.getItem('user');
            //修改别人的数据情况
            if(self.formValidate.id
                && self.formValidate.id.length>0
                && myname!=self.formValidate.creator){
                    self.save_loading = false;
                    self.$Message.error('请不要修改队友的数据!');
                    return false;
            }
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let param = new FormData(); //创建form对象
                    param.append('id',self.formValidate.id);//ID
                    param.append('titlename',self.formValidate.titlename);//标题
                    param.append('codeType',self.formValidate.codeType);//类型
                    param.append('codeContent',self.formValidate.codeContent);//代码
                    param.append('creator',self.formValidate.creator);//作者
                    param.append('orderNum',self.formValidate.orderNum);//序号
                    param.append('readNums',self.formValidate.readNums);//阅读次数
                    console.log(self.formValidate.id)
                    self.$axios.post(self.$util.server+'codebase/save',  param, {
                        headers: {
                            "authorization": localStorage.getItem("authorization"),
                            "Content-Type":"multipart/form-data"
                        }
                    }).then(function(response) {
                        self.save_loading = false;
                        if(response.data.ok){
                            self.$Message.success('保存成功!');
                            self.handleSearch(1);
                        }else{
                            self.$Message.error('保存失败，请检查!');
                        }
                    }).catch( function(response) {
                        self.$Message.error('保存失败，请检查输入内容!');
                        console.log(response)
                    });
                } else {
                    self.save_loading = false;
                    self.$Message.error('内容验证不通过，请检查输入内容!');
                }
            })
        },
        handleFormdata (currentRow,oldCurrentRow) {
            if(currentRow){
                this.formValidate.id = currentRow.id;//ID
                this.formValidate.titlename = currentRow.titlename;//标题
                this.formValidate.codeType = currentRow.codeType;//类型
                this.formValidate.codeContent = currentRow.codeContent;//代码
                if(this.formValidate.codeContent){
                    this.formValidate.codeContent = this.formValidate.codeContent.replace(/&lt;/g, "<")
                    this.formValidate.codeContent = this.formValidate.codeContent.replace(/&gt;/g, ">")
                }
                this.formValidate.creator = currentRow.creator;//创建人
                this.formValidate.orderNum = currentRow.orderNum;//序号
                this.formValidate.readNums = currentRow.readNums;//阅读次数

                //增加阅读次数
                this.$axios.post(this.$util.server+'codebase/readShow?testid='+currentRow.id, {}, {
                    headers: {"authorization": localStorage.getItem("authorization"),"Content-Type":"application/json;charset=utf-8"},
                }).then(function(response) {})
            }
        },
        handleReset (name) {
            this.$refs[name].resetFields();
            this.formValidate.creator = localStorage.getItem('user');
            this.formValidate.readNums = 0;
        },
        handleSearch (topage) {
            //初始化列表
            let self = this;
            self.table.loading = true;//loading效果
            let size = this.page.pagesize;
            if(topage) this.page.current = topage;
            let page = this.page.current-1;
            console.log(page)
            let sort = this.page.key + ',' + this.page.order;
            if(this.page.order=='normal'){ sort = 'orderNum, asc';}
            let key = this.key;
            let keywords = this.keywords;

            this.$axios.get(self.$util.server+'codebase/pagedata', {
                params:{
                    searchtype: self.searchtype,
                    creator: localStorage.getItem('user'),
                    size: size,
                    page: page,
                    sort: sort,
                    key: key,
                    keywords: keywords
                },
                headers: {
                    "authorization": localStorage.getItem("authorization"),
                    "Content-Type":"application/json;charset=utf-8"
                }
            }).then(function(response) {
                  self.table.loading = false;//取消loading效果
                if(response.data.total>0) {
                    self.page.total = response.data.total;
                    self.data = response.data.rows;
                }else{
                    self.page.total = 0;
                    self.data = [];
                }
		    }).catch( function(response) {
            self.table.loading = false;//取消loading效果
		       	console.log(response)
		    });
        },
        changePage(current){
            this.page.current = current;
            this.handleSearch();
        },
        changeSort(column){
            this.page.key = column.key;
            this.page.order = column.order;
            this.handleSearch(1);
        },
        changeSearchtype(){
            this.handleSearch(1)
        },
        handleInit () {
            //用户名
            this.formValidate.creator = localStorage.getItem('user');
            //初始化查询
            this.handleSearch()
        }
    },
    mounted () {
        this.handleInit();
    }

};
</script>
